<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }

        .banner{
            position: relative;
            width: 1226px;
            height: 460px;
            margin: 0 auto;
            margin-top: 100px;

        }
        .side{
            position: absolute;
            left: 0;
            top: 0;
            width: 234px;
            height: 460px;
            background-color: rgba(0,0,0,.3);
        }

        .banner .arr{
            width: 40px;
            height: 70px;
            background-color: pink;
            /* 鼠标 手型 */
            cursor: pointer;
        }
        .arr.arr-l{
            position: absolute;
            left: 234px;
            top: 50%;
            margin-top: -35px;
            background: url(img/arr.png) no-repeat -83px 0;
        }
        .arr.arr-l:hover{
            background-position: 0 0;
        }
        .arr.arr-r{
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -35px;
            background: url(img/arr.png) no-repeat -124px 0;
        }
        .arr.arr-r:hover{
            background-position: -42px 0;
        }
        .banner .dot{
            position: absolute;
            bottom: 50px;
            right: 50px;
        }
        .banner .dot-item{
            float: left;
            width: 6px;
            height: 6px;
            border: 2px solid hsla(0,0%,100%,.3);
            margin: 0 4px;
            background-color: rgba(0,0,0,.4);
            /* 可以让正方形 变成圆形 */
            border-radius: 50%;
            cursor: pointer;
        }
        .banner .dot-item:hover{
            background-color: hsla(0,0%,100%,.3);
            border-color: rgba(0,0,0,.4);
        }
    </style>
</head>
<body>
    <div class="banner">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8034ec1d8faf0d61e335aad947b88b52.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt="">

        <!-- 侧边蓝 -->
        <ul class="side">
            <li class="side-item">手机 电话</li>
            <li class="side-item">手机 电话</li>
            <li class="side-item">手机 电话</li>
            <li class="side-item">手机 电话</li>
            <li class="side-item">手机 电话</li>
            <li class="side-item">手机 电话</li>
        </ul>

        <!-- 左右箭头 -->
        <div class="arr arr-l"></div>
        <div class="arr arr-r"></div>

        <!-- 分页器 -->
        <ul class="dot">
            <li class="dot-item">

            </li>
            <li class="dot-item">
                
            </li>
            <li class="dot-item">
                
            </li>
            <li class="dot-item">
                
            </li>
        </ul>

    </div>
</body>
</html>